<script setup>
import { inject, ref } from "vue";
// import stepsview from "../components/steps/steps.vue";
import { productlst, cate, bannerlist } from "@/services/index";
import tabbarView from "../components/tabbar.vue";
import { onLoad, onShow, onReachBottom } from "@dcloudio/uni-app";
import { goodsselectStore } from "@/stores/goods.js";
const list4 = ref([{ name: "全部", id: "" }]);
const keyword = ref("");
const valuetabbar = ref(1);
const cates = ref("");
const current = ref(0);

const list = ref([]);
const status = ref("more");
const pages = ref({
  page: 1,
  limit: 20,
});
const loading = ref(true);

const catesobj = goodsselectStore();

onLoad((e) => {
  // type.value = e.type ? e.type : 1;
});
onShow(() => {
  valuetabbar.value = 1;
  list4.value = [{ name: "全部", id: "" }];
  current.value = 0;
  loading.value = true;
  list.value = [];
  pages.value.page = 1;

  catefun();
});
//下拉触底
onReachBottom(() => {
  // 触发下拉触底时执行的操作
  // getlist();
});

async function getlist() {
  status.value = "loading";
  let res = await productlst({
    keyword: keyword.value,
    cates: cates.value,
    ...pages.value,
  });

  list.value = list.value.concat(res.data.list);
  loading.value = false;
  //   numobj.value = res.data.sum;
  if (res.data.list.length < pages.value.limit) {
    status.value = "no-more";
  } else {
    status.value = "more";
  }
  pages.value.page++;
}

async function catefun() {
  let res = await cate();
  list4.value = list4.value.concat(res.data);
  if (catesobj.cates) {
    uni.pageScrollTo({
      scrollTop: 0,
      duration: 1000, // 动画时长，默认300ms，可以设置为0表示无动画直接跳转
    });

    res.data.forEach((element, index) => {
      if (element.id == catesobj.cates) {
        current.value = index + 1;

        cates.value = element.id;
      }
    });
  } else {
    current.value = 0;
    cates.value = "";
  }

  getlist();

  //   shopform.value.cates = selectsubid.value;
  //   productlstfun();
}
const selecttabsfun = (item, index) => {
  current.value = index;
  pages.value.page = 1;
  cates.value = item.id;
  loading.value = true;
  list.value = [];
  getlist();
};

const searchfun = () => {
  pages.value.page = 1;
  list.value = [];
  getlist();
};

const gogoods = (id) => {
  uni.navigateTo({
    url: `/pages/goods/details/index?id=${id}`,
  });
};
</script>

<template>
  <view class="content">
    <view class="content-tabs">
      <view class="content-sh">
        <up-search
          placeholder="商品"
          v-model="keyword"
          :showAction="false"
          @search="searchfun"
        ></up-search>
      </view>
      <up-tabs
        :list="list4"
        lineWidth="30"
        lineColor="#F3498B"
        :activeStyle="{
          color: '#F3498B',
          fontWeight: 'bold',
          transform: 'scale(1.05)',
        }"
        :inactiveStyle="{
          color: '#606266',
          transform: 'scale(1)',
        }"
        :current="current"
        @change="selecttabsfun"
        itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
      >
      </up-tabs>
    </view>
    <!-- <view style="width: 100%; height: 1500rpx"></view> -->
    <view class="home-goods">
      <view class="goods-list">
        <view
          class="goods-item"
          v-for="(item, index) in list"
          :key="index"
          @click="gogoods(item.product_id)"
        >
          <view class="goods-image">
            <image :src="item.image" mode="aspectFill" />
          </view>
          <view class="goods-titles"> {{ item.store_name }} </view>

          <view class="goods-price">
            <text>¥{{ item.price }}</text>
            <!-- <text>¥{{ item.price }}</text> -->
          </view>
        </view>
      </view>
    </view>
    <uni-load-more
      color="#c6c5c3"
      :status="status"
      v-if="!loading && list.length > 0"
    />
  </view>

  <view class="nodeta" v-if="!loading && list.length <= 0">
    <image src="@/static/nodate/nodate.png" mode="widthFix" />
    <view> <text style="color: rgb(198, 197, 195)">~暂无商品~</text></view>
  </view>

  <!-- #ifdef MP-WEIXIN || WEB  -->
  <tabbarView :value="valuetabbar"></tabbarView>
  <!-- #endif -->
</template>

<style lang="scss" scoped>
@import "./index.scss";
</style>
